<div class="page-title navigated">
  <div class="row">
    <div class="col-xs-9"><h1>Roles</h1></div>
    <div class="col-xs-3 main-button">
      <button
        type="button"
        class="btn btn-primary"
        (click)="editRole()"
        [shownFor]="'create_role'"
      >
        Create New Role
      </button>
    </div>
  </div>
</div>

<div class="roles grid row" *ngIf="roles && roles.length">
  <div class="grid-header">
    <div class="col-xs-2"></div>
    <div
      class="col-xs-2 name"
      *ngFor="let role of roles"
      data-toggle="tooltip"
      data-placement="top"
      title="{{role.data.name}}"
    >
      {{role.data.name|trim_by:10}}
      <button
        class="btn btn-link"
        (click)="editRole(role)"
        [shownFor]="'edit_role'"
      >
        <span class="glyphicon glyphicon-pencil"></span>
      </button>
      <button
        class="btn btn-link"
        (confirmedClick)="deleteRole(role)"
        [confirmation]="'Delete role ' + role.data.name + '?'"
        [shownFor]="'delete_role'"
      >
        <span class="glyphicon glyphicon-trash"></span>
      </button>
    </div>
  </div>
  <section PermissionsGroup
    *ngFor="let group of permissions"
    [group]="group"
    [roles]="roles">
  </section>
</div>

<loader *ngIf="!roles"></loader>

<modal [title]="newRole.id ? 'Edit Role ' + oldRoleName : 'New Role'">
  <wizard
    [steps]="roleSteps"
    (saveHandler)="save($event)"
  >
  </wizard>
</modal>